
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ecoride Map Service</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA08syTZoeZ59o8mbz_bIn7RToTc3ek_tkN63Cmss4ANHDSwWkQxSMFpq2CTKiFxH5glLsQRgZYw0UHQ"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;
    var arrLocation= new Array();
    
    function SourceDestination()
    {
        this.Source="";
	this.Destination="";
	this.GDir="";
	this.GData="";
	this.markerStart="";
	}
  
  function initialize() {

  arrLocation[arrLocation.length]=new SourceDestination()
  arrLocation[arrLocation.length-1].Source="San Francisco"
  arrLocation[arrLocation.length-1].Destination="Mountain View"
  arrLocation[arrLocation.length-1].GData="chetansharma11@gmail.com";

  arrLocation[arrLocation.length]=new SourceDestination()
  arrLocation[arrLocation.length-1].Source="Los Angeles"
  arrLocation[arrLocation.length-1].Destination="San Diego"
  arrLocation[arrLocation.length-1].GData="jBeri@gmail.com";

  arrLocation[arrLocation.length]=new SourceDestination()
  arrLocation[arrLocation.length-1].Source="Los Angeles"
  arrLocation[arrLocation.length-1].Destination="New York"
  arrLocation[arrLocation.length-1].GData="chaitanya@gmail.com";

  var counter=0

  var objDistance=new Object()

      if (GBrowserIsCompatible()) {      
        
	map = new GMap2(document.getElementById("map_canvas"));
	map.setCenter(new GLatLng(37,-122),8);

	while(counter<arrLocation.length)
	{
	var strID="div"+counter

        gdir = new GDirections()
	arrLocation[counter].GDir=gdir
	setDirections(arrLocation[counter],"en-US")
	counter++;
	}

      }
    }

    
    function setDirections(location, locale) {
     
	GEvent.addListener(location.GDir,"load", function()
	{
	
	var route = location.GDir.getRoute(0);

	location.markerStart = new GMarker(route.getStep(0).getLatLng());
	markerEnd = new GMarker(route.getEndLatLng());
        markerEnd.isEnd = true;        

        map.addOverlay(location.markerStart);
        map.addOverlay(markerEnd);

	map.addOverlay(location.GDir.getPolyline());
	
        location.markerStart.setImage("http://www.google.com/intl/en_us/mapfiles/dd-start.png");
        markerEnd.setImage("http://www.google.com/intl/en_us/mapfiles/dd-end.png");

		GEvent.addListener(location.markerStart, "click", function() {
	location.markerStart.openInfoWindowHtml(location.GData);
	});

	})

	location.GDir.load("from: "+ location.Source + " to: " + location.Destination,{locale: locale, getPolyline: true, getSteps: true});

	

    }	
    
</script>

  </head>

  <body bgcolor="black" onload="initialize()" onunload="GUnload()">

  <h2><font color="green">Eco Ride</font></h2>
  
  <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

  <table>

   <tr><th align="right"><font color="green"> From:&nbsp;</font></th>

   <td><input type="text" size="25" id="fromAddress" name="from" value="San Francisco"/></td>
   
   <th align="right"><font color="green">&nbsp;&nbsp;To:&nbsp;</font></th>
   
   <td align="right"><input type="text" size="25" id="toAddress" name="to" value="Mountain View" /></td></tr>

   <tr>

   <td colspan="3">
   
   <input name="submit" type="submit" value="Get Directions!" />

   </td></tr>
   </table>
   
  </form>

    <br/>
    
    <table class="directions">
    <tr><th><font color="green">Map</font></th></tr>

    <tr><td valign="top" id="tdDirections"><div id="directions" style="width: 275px"></div></td>
    <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

    </tr>
    </table>
  </body>
</html>